var SysChart = function(canvasId, configJson, styleFlag) {
  var canvas = null
  var ctx = null
  var chartJson = {}
  // 存放渲染一次系统图的详细数据
  // width,length,图元的宽和长
  // (x,y),图元起点位置
  // end(x,y),图元终点位置
  // connect_pre(x,y),连接前一图元的位置,默认为起点(x,y)
  // connect_next(x,y),,连接后一图元的位置,默认为终点end(x,y)
  // title(x,y),图元标题起点位置
  // data(x,y),图元数据起点位置
  // data(width,height),图元数据区域宽度与高度

  var config = {
    show_tag: [], // 允许显示的参数
    canvas_id: canvasId || 'canvas',
    context: '2d',
    canvas_width: 1200,
    canvas_height: 1000,
    zoom_x: 0.9,
    zoom_y: 0.9,
    start_x: 60,
    start_y: 60,
    horizontal_align: 'start',
    vertical_align: 'top',
    show_grid: false,
    grid_space: 20,
    grid_style: 'gray',
    grid_line_width: 1,

    horizontal_space: 80, // 图元的横向间隔,建议horizontal_space:pel_length
    vertical_space: 80, // 图元的纵向间隔,建议vertical_space:pel_length
    text_space: 10, // 图元中心与文字左侧的间隔
    pel_width: 10, // 图元的标准宽度,横向图元则为标准高度,建议spec_height/pel_width:8
    pel_length: 80, // 图元的标准长度,横向图元则为标准宽度,建议spec_height/pel_width:8
    text_height: 15, // 文本的最大高度
    text_width: 100, // 文本的最大宽度

    // styleFlag:true,黑色背景;false:透明背景
    line_width: 2,
    pel_line_width: 2,
    line_style: styleFlag ? '#00ffff' : '#ff9900', // 边接线样式
    pel_style: styleFlag ? '#ffff00' : '#0000ff',	// 图元线条样式
    title_style: styleFlag ? '#ffff00' : '#0000ff', // 图元标题样式
    tag_style: styleFlag ? '#00ff00' : '#008000', // 图元参数样式
    data_style: styleFlag ? '#ffffff' : '#000000', // 图元数据样式
    title_font: null, // 图元标题字体样式
    tag_font: null, // 图元参数字体样式
    data_font: null, // 图元数据字体样式
    background_style: styleFlag ? '#000000' : null, // 画布背景样式
    default_style: null, // 默认图元填充样式
    abnormal_style: '#ff0000', // 正常状态图元填充样式
    normal_style: styleFlag ? '#00ff00' : '#00cc00'// 非正常状态图元填充样式
  }

  // 初始化基本参数与事件
  construction()

  // 根据图元类别画图元
  function drawPel(pelJson, style) {
    switch (pelJson.type.toLowerCase()) {
      case 'transformer':
        drawTransformer(pelJson.x, pelJson.y, pelJson.width, style)
        break
      case 'feeder':
        drawFeeder(pelJson.x, pelJson.y, pelJson.width, pelJson.length, style)
        break
      case 'capacitance':
        drawSwitch(pelJson.x, pelJson.y, pelJson.width, pelJson.length, style)
        drawInductor(pelJson.end_x, pelJson.end_y, pelJson.width * 4, style)
        drawFuse(pelJson.end_x, pelJson.end_y + pelJson.width * 4, pelJson.width, pelJson.ength, style)
        drawCapacitance(pelJson.end_x, pelJson.end_y + pelJson.length + pelJson.width * 4, pelJson.width * 4)
        break
      case 'point':
        drawBreaker(pelJson.x, pelJson.y, pelJson.width, pelJson.length, style)
        break
      default:
        drawSwitch(pelJson.x, pelJson.y, pelJson.width, pelJson.length, style)
        break
    }
  }

  // 加载数据并绘图
  function load(layoutJson) {
    debugger
    try {
      if (layoutJson && typeof (layoutJson) === 'object') {
        chartJson = loadLayout(layoutJson.children)
        draw(chartJson)
      } else {
        return false
      }
    } catch (e) {
      return false
    }
    return true
  }

  // 根据图元数据渲染图元
  function draw(pelJson) {
    init()
    drawChart(pelJson || chartJson)
  }

  // 手动缩放功能
  function zoom(x, y) {
    if (x > 0 && y > 0) {
      config.zoom_x *= x
      config.zoom_y *= y
      draw()
    }
  }

  // 更新数据,dataJson格式如下
  // {
  // 	point_id:"",
  // 	status:{
  // 		flag:""
  // 	},
  // 	data:{
  // 		tagId:"tagValue"
  // 	}
  // }
  function update(dataJson) {
    console.log(dataJson)
    var pelId = null
    if (dataJson && dataJson.point) {
      pelId = dataJson.point
      if (chartJson[idMap[pelId]]) {
        if (dataJson.status && dataJson.status.sw != null) {
          chartJson[idMap[pelId]].status = dataJson.status.sw
          // chartJson[pelId].status = dataJson.status.flag;
        }
        if (dataJson.data) {
          // chartJson[pelId].data = flitrateData(dataJson.data);
          chartJson[idMap[pelId]].data = Object.assign({}, chartJson[idMap[pelId]].data, flitrateData(dataJson.data))
        }
        draw(chartJson)
      }
    }
  }

  // 仅更新状态
  function updateStatus(pelId, flag) {
    if (pelId != null && flag != null) {
      chartJson[pelId].status = flag
      var style = null
      if (flag == null) {
        style = config.default_style
      } else if (flag) {
        style = config.normal_style
      } else {
        style = config.abnormal_style
      }
      drawPel(chartJson[pelId], style)
    }
  }

  // 仅更新数据,dataJson格式如下
  // {
  // 	tagId:"tagValue"
  // }
  function updateData(pelId, dataJson) {
    if (pelId != null && dataJson != null) {
      var datajson = flitrateData(dataJson)
      chartJson[pelId].data = datajson
      ctx.clearRect(chartJson[pelId].data_x, chartJson[pelId].data_y, chartJson[pelId].data_width, chartJson[pelId].data_height)
      if (config.background_style) {
        ctx.fillStyle = config.background_style
        ctx.fillRect(chartJson[pelId].data_x, chartJson[pelId].data_y, chartJson[pelId].data_width, chartJson[pelId].data_height)
      }
      fillData(chartJson[pelId].data_x, chartJson[pelId].data_y, datajson, config.text_height, chartJson[pelId].data_width, chartJson[pelId].data_height)
    }
  }

  // 初始化环境
  function init(configJson) {
    if (configJson && typeof (configJson) === 'object') {
      for (var key in configJson) {
        config[key] = configJson[key]
      }
    }
    canvas.width = config.canvas_width
    canvas.height = config.canvas_height
    ctx.textAlign = config.horizontal_align
    ctx.textBaseline = config.vertical_align
    ctx.clearRect(0, 0, config.canvas_width, config.canvas_height)
    if (config.background_style != null) {
      ctx.fillStyle = config.background_style
      ctx.fillRect(0, 0, config.canvas_width, config.canvas_height)
    }
    ctx.scale(config.zoom_x, config.zoom_y)
    if (config.show_grid) {
      ctx.lineWidth = config.grid_line_width
      ctx.strokeStyle = config.grid_style
      drawGrid(0, 0, config.canvas_width / config.zoom_x, config.canvas_height / config.zoom_y, config.grid_space)
    }
    ctx.translate(config.start_x, config.start_y)
  }

  // 构建事件
  function construction() {
    canvas = document.getElementById(config.canvas_id)
    ctx = canvas.getContext(config.context)
    // var dragflag = false
    var originPoint = { x: 0, y: 0 }
    canvas.draggable = true
    canvas.addEventListener('mousedown', function(event) {
      // const dragflag = true
      originPoint.x = event.clientX
      originPoint.y = event.clientY
    })
    canvas.addEventListener('dragend', function(event) {
      // dragflag = false
    })
    canvas.addEventListener('drag', function(event) {
      const newPosition = { x: event.clientX, y: event.clientY }
      config.start_x += (newPosition.x - originPoint.x)
      config.start_y += (newPosition.y - originPoint.y)
      originPoint = newPosition
      draw()
    })
    canvas.addEventListener('dragover', function(event) {
      event.preventDefault()
      event.stopPropagation()
    })
    canvas.addEventListener('dragenter', function(event) {
      event.preventDefault()
      event.stopPropagation()
    })
    canvas.addEventListener('mousewheel', function(event) {
      event.preventDefault()
      event.stopPropagation()
      zoom(1 + event.deltaY / 1000, 1 + event.deltaY / 1000)
    })
  }

  // 获取当前点位对应图元点
  // function getPel(event) {
  //   var event_x = (event.clientX - canvas.getBoundingClientRect().left) / config.zoom_x - config.start_x
  //   var event_y = (event.clientY - canvas.getBoundingClientRect().top) / config.zoom_y - config.start_y
  //   for (const key in chartJson) {
  //     if (chartJson[key].focus_x) {
  //       if (event_x > chartJson[key].focus_x && event_x < chartJson[key].focus_end_x && event_y > chartJson[key].focus_y && event_y < chartJson[key].focus_end_y) {
  //         return key
  //       }
  //     }
  //   }
  //   return null
  // }

  // 根据show_tag显示数组过滤数据
  function flitrateData(dataJson) {
    var datajson = {}
    if (config.show_tag.length > 0) {
      for (var i = 0; i < config.show_tag.length; ++i) {
        if (dataJson[config.show_tag[i]] != null) {
          datajson[config.show_tag[i]] = (Math.ceil(dataJson[config.show_tag[i]] * 100)) / 100
        }
      }
    } else {
      datajson = dataJson
    }
    return datajson
  }

  // 解析布局数据为图元数据
  var idMap = {}
  function loadLayout(layoutJson) {
    var chartJson = {}
    var transf = layoutJson

    var transf_x = 0
    var transf_y = 0
    var feeder_x = transf_x
    var feeder_y = transf_y + config.pel_length + config.vertical_space
    var point_x = feeder_x + config.horizontal_space
    var point_y = feeder_y + config.pel_length + config.vertical_space

    for (var i = 0; i < transf.length; ++i) {
      var transJson = {}
      idMap[transf[i].id] = transf[i].uid
      transJson.type = 'transformer'
      transJson.title = transf[i].name
      transJson.connect = transf[i].pre_uid || transf[i].parent_uid
      transJson.width = 5 * config.pel_width
      transJson.length = config.pel_length
      transJson.x = transf_x
      transJson.y = transf_y
      transJson.end_x = transJson.x
      transJson.end_y = transJson.y + transJson.length
      transJson.connect_pre_x = transJson.x
      transJson.connect_pre_y = transJson.y
      transJson.connect_next_x = transJson.end_x
      transJson.connect_next_y = transJson.end_y
      transJson.title_x = transJson.x + transJson.width / 2 + config.text_space
      transJson.title_y = transJson.y
      transJson.data_x = transJson.title_x
      transJson.data_y = transJson.title_y + config.text_height
      transJson.data_width = transJson.length / 2 + config.horizontal_space - config.text_space * 2
      transJson.data_height = transJson.length - config.text_height
      chartJson[transf[i].uid] = transJson
      feeder_y = transJson.end_y + config.vertical_space / 2
      feeder_x = transJson.x - transJson.length / 2
      transf_x = transJson.x + transJson.length + config.horizontal_space
      for (var j = 0; j < transf[i].children.length; ++j) {
        var feederJson = {}
        idMap[transf[i].children[j].id] = transf[i].children[j].uid
        feederJson.type = 'feeder'
        feederJson.title = transf[i].children[j].name
        feederJson.connect = transf[i].children[j].pre_uid || transf[i].children[j].parent_uid
        // 馈线为横向直线,仅显示标题
        feederJson.width = 0
        feederJson.length = config.pel_length
        feederJson.x = feeder_x
        feederJson.y = feeder_y
        // 馈线连接为连接起点
        feederJson.end_x = feederJson.x + feederJson.length
        feederJson.end_y = feederJson.y
        feederJson.connect_pre_x = feederJson.x + (j === 0 ? feederJson.length / 2 : 0)
        feederJson.connect_pre_y = feederJson.y
        feederJson.connect_next_x = feederJson.end_x - feederJson.length / 2
        feederJson.connect_next_y = feederJson.end_y
        feederJson.title_x = feederJson.connect_next_x
        feederJson.title_y = feederJson.y - config.text_height
        feederJson.data_x = feederJson.title_x
        feederJson.data_y = feederJson.title_y
        feederJson.data_width = feederJson.length
        feederJson.data_height = 0
        chartJson[transf[i].children[j].uid] = feederJson
        feeder_x = feederJson.end_x + config.horizontal_space
        transf_x = feederJson.end_x + config.horizontal_space
        point_x = feederJson.connect_next_x
        point_y = feederJson.y + config.vertical_space
        for (var k = 0; k < transf[i].children[j].children.length; ++k) {
          var pointJson = {}
          idMap[transf[i].children[j].children[k].id] = transf[i].children[j].children[k].uid
          // 单个器件开关,纵向排列
          if (transf[i].children[j].children.length === 1) {
            pointJson.type = 'capacitance'
            pointJson.width = config.pel_width
            pointJson.length = config.pel_length
            pointJson.x = point_x
            pointJson.y = point_y
            pointJson.end_x = pointJson.x
            pointJson.end_y = pointJson.y + pointJson.length
            pointJson.connect_pre_x = pointJson.x
            pointJson.connect_pre_y = pointJson.y
            pointJson.connect_next_x = pointJson.end_x
            pointJson.connect_next_y = pointJson.end_y
            pointJson.focus_x = pointJson.x - pointJson.width / 2
            pointJson.focus_y = pointJson.y + pointJson.width * 5 / 2
            pointJson.focus_end_x = pointJson.focus_x + pointJson.width
            pointJson.focus_end_y = pointJson.focus_y + pointJson.length - pointJson.width * 5
            pointJson.title_x = pointJson.x + pointJson.width / 2 + config.text_space
            pointJson.title_y = pointJson.y + config.text_space
            pointJson.data_x = pointJson.title_x
            pointJson.data_y = pointJson.title_y + config.text_height
            pointJson.data_width = pointJson.length / 2 + config.horizontal_space - config.text_space * 2
            pointJson.data_height = pointJson.length - config.text_height
          } else {
            // 开关为横向图元,宽度为pel_length,高度为pel_width
            pointJson.type = 'point'
            pointJson.width = config.pel_length
            pointJson.length = config.pel_width
            pointJson.x = point_x
            pointJson.y = point_y
            pointJson.end_x = pointJson.x
            pointJson.end_y = pointJson.y
            pointJson.connect_pre_x = pointJson.x
            pointJson.connect_pre_y = pointJson.y
            pointJson.connect_next_x = pointJson.x
            pointJson.connect_next_y = pointJson.y
            pointJson.focus_x = pointJson.x + pointJson.length * 5 / 2
            pointJson.focus_y = pointJson.y - pointJson.length / 2
            pointJson.focus_end_x = pointJson.focus_x + pointJson.width - pointJson.length * 5
            pointJson.focus_end_y = pointJson.focus_y + pointJson.length
            pointJson.title_x = pointJson.x + config.text_space
            pointJson.title_y = pointJson.y - pointJson.length / 2 - config.vertical_space + config.text_space
            pointJson.data_x = pointJson.title_x
            pointJson.data_y = pointJson.title_y + config.text_height
            pointJson.data_width = pointJson.width + config.horizontal_space - config.text_space * 2
            pointJson.data_height = config.vertical_space - config.text_space * 2 - config.text_height
            point_y = pointJson.y + pointJson.length + config.vertical_space
          }
          pointJson.title = transf[i].children[j].children[k].name
          pointJson.connect = transf[i].children[j].children[k].pre_uid || transf[i].children[j].children[k].parent_uid
          chartJson[transf[i].children[j].children[k].uid] = pointJson
        }
      }
    }
    console.log('chartJson', chartJson)
    return chartJson
  }

  // 根据图元数据渲染图元
  function drawChart(chartJson) {
    for (var key in chartJson) {
      var style = null
      // 画连接线
      ctx.lineWidth = config.line_width
      ctx.strokeStyle = config.line_style
      if (chartJson[chartJson[key].connect]) {
        ctx.beginPath()
        ctx.moveTo(chartJson[key].connect_pre_x, chartJson[key].connect_pre_y)
        ctx.lineTo(chartJson[key].connect_pre_x, chartJson[chartJson[key].connect].connect_next_y)
        ctx.lineTo(chartJson[chartJson[key].connect].connect_next_x, chartJson[chartJson[key].connect].connect_next_y)
        ctx.stroke()
      }
      // 渲染图元
      ctx.lineWidth = config.pel_line_width
      ctx.strokeStyle = config.pel_style
      if (chartJson[key].status == null) {
        style = config.default_style
      } else if (chartJson[key].status === '1') {
        style = config.normal_style
      } else {
        style = config.abnormal_style
      }
      // drawPel(chartJson[key].x,chartJson[key].y,chartJson[key].type,chartJson[key].width,chartJson[key].length,style);
      drawPel(chartJson[key], style)
      // 填充标题
      ctx.fillStyle = config.title_style
      ctx.font = config.title_font
      ctx.fillText(chartJson[key].title, chartJson[key].title_x, chartJson[key].title_y)
      // 填充数据
      if (chartJson[key].data) {
        fillData(chartJson[key].data_x, chartJson[key].data_y, chartJson[key].data, config.text_height, chartJson[key].data_width, chartJson[key].data_height)
      }
    }
  }

  // 填充数据
  // 起点坐标(x,y),数据内容data
  // 宽度width默认150;高度length,默认width/3
  function fillData(x, y, data, text_height, width, height) {
    text_height = text_height || 15
    width = width || text_height * 9
    height = height || text_height * 3
    if (data) {
      var length_l = 0
      for (const key in data) {
        length_l = Math.max(length_l, ctx.measureText(key + ': ').width)
      }
      var length_r = width / 3 - length_l
      var top = y
      var left = x + length_l
      for (const key in data) {
        ctx.fillStyle = config.tag_style
        ctx.font = config.tag_font
        ctx.textAlign = 'right'
        ctx.fillText(key + ': ', left, top, length_l)
        ctx.fillStyle = config.data_style
        ctx.font = config.data_font
        ctx.textAlign = 'left'
        ctx.fillText(data[key], left, top, length_r)
        top += text_height
        if (height - text_height < top - y) {
          top = y
          left += (length_l + length_r)
          if (x + width <= left) {
            left = x + length_l
          }
        }
      }
    }
  }

  // 渲染状态
  // 起点坐标(x,y),宽度width,默认10;长度length,默认3倍width
  function fillPel(style, x, y, width, length) {
    width = width || 10
    length = length || width * 3
    ctx.fillStyle = style
    ctx.fillRect(x, y, width, length)
  }

  // 馈线柜
  // 起点坐标(x,y),宽度width,0;长度length,默认8倍width
  function drawFeeder(x, y, width, length, style) {
    width = width || 0
    length = length || 80
    ctx.beginPath()
    ctx.strokeRect(x, y, length, width)
  }

  // 熔断器
  // 起点坐标(x,y),宽度width,默认10;长度length,默认8倍width
  function drawFuse(x, y, width, length, style) {
    width = width || 10
    length = length || width * 8
    ctx.beginPath()
    // 纵向
    if (width <= length) {
      length = length - width * 5
      if (style != null) {
        fillPel(style, x - width / 2, y + width * 5 / 2, width, length)
      }
      ctx.strokeRect(x - width / 2, y + width * 5 / 2, width, length)
      ctx.moveTo(x, y)
      ctx.lineTo(x, y + width * 5 + length)
    } else {
      // 横向
      width = width + length
      length = width - length
      width = width - length
      length = length - width * 5
      if (style != null) {
        fillPel(style, x + width * 5 / 2, y - width / 2, length, width)
      }
      ctx.strokeRect(x + width * 5 / 2, y - width / 2, length, width)
      ctx.moveTo(x, y)
      ctx.lineTo(x + width * 5 + length, y)
    }
    ctx.stroke()
  }

  // 开关
  // 起点坐标(x,y),宽度width,默认10;长度length,默认8倍width
  function drawSwitch(x, y, width, length, style) {
    width = width || 10
    length = length || width * 8
    ctx.beginPath()
    // 纵向
    if (width <= length) {
      length = length - width * 5
      if (style != null) {
        fillPel(style, x - width / 2, y + width * 5 / 2, width, length)
      }
      ctx.strokeRect(x - width / 2, y + width * 5 / 2, width, length)
      ctx.moveTo(x, y)
      ctx.lineTo(x, y + width * 5 / 2)
      ctx.moveTo(x, y + width * 5 / 2 + length)
      ctx.lineTo(x, y + width * 5 + length)
    } else {
      // 横向
      width = width + length
      length = width - length
      width = width - length
      length = length - width * 5
      if (style != null) {
        fillPel(style, x + width * 5 / 2, y - width / 2, length, width)
      }
      ctx.strokeRect(x + width * 5 / 2, y - width / 2, length, width)
      ctx.moveTo(x, y)
      ctx.lineTo(x + width * 5 / 2, y)
      ctx.moveTo(x + width * 5 / 2 + length, y)
      ctx.lineTo(x + width * 5 + length, y)
    }
    ctx.stroke()
  }

  // 断路器手车
  // 起点坐标(x,y),宽度width,默认10;长度length,默认8倍width
  function drawBreaker(x, y, width, length, style) {
    width = width || 10
    length = length || width * 8
    ctx.beginPath()
    // 纵向
    if (width <= length) {
      length = length - width * 5
      if (style != null) {
        fillPel(style, x - width / 2, y + width * 5 / 2, width, length)
      }
      ctx.strokeRect(x - width / 2, y + width * 5 / 2, width, length)
      ctx.moveTo(x, y)
      ctx.lineTo(x, y + width * 5 / 2)
      ctx.moveTo(x, y + width * 5 / 2 + length)
      ctx.lineTo(x, y + width * 5 + length)

      y += width
      ctx.moveTo(x - width / 2, y + width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y + width / 2)

      y += width / 2
      ctx.moveTo(x - width / 2, y + width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y + width / 2)

      y += (width * 2 + length)
      ctx.moveTo(x - width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y - width / 2)

      y += width / 2
      ctx.moveTo(x - width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y - width / 2)
    } else {
      // 横向
      width = width + length
      length = width - length
      width = width - length
      length = length - width * 5
      if (style != null) {
        fillPel(style, x + width * 5 / 2, y - width / 2, length, width)
      }
      ctx.strokeRect(x + width * 5 / 2, y - width / 2, length, width)
      ctx.moveTo(x, y)
      ctx.lineTo(x + width * 5 / 2, y)
      ctx.moveTo(x + width * 5 / 2 + length, y)
      ctx.lineTo(x + width * 5 + length, y)

      x += width
      ctx.moveTo(x + width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y + width / 2)

      x += width / 2
      ctx.moveTo(x + width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x + width / 2, y + width / 2)

      x += (width * 2 + length)
      ctx.moveTo(x - width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x - width / 2, y + width / 2)

      x += width / 2
      ctx.moveTo(x - width / 2, y - width / 2)
      ctx.lineTo(x, y)
      ctx.lineTo(x - width / 2, y + width / 2)
    }
    ctx.stroke()
  }

  // 负载开关
  // 起点坐标(x,y),宽度width,默认10;长度length,默认8倍width
  // function drawloadSwitch(x, y, width, length, style) {
  //   width = width || 10
  //   length = length || width * 8
  //   ctx.beginPath()
  //   if (width <= length) {
  //     length = length - width * 5
  //     if (style != null) {
  //       fillPel(style, x - width / 2, y + width * 5 / 2, width, length)
  //     }
  //     ctx.strokeRect(x - width / 2, y + width * 5 / 2, width, length)
  //     ctx.moveTo(x, y)
  //     ctx.lineTo(x, y + width * 5 / 2)
  //     ctx.moveTo(x, y + width * 5 / 2 + length)
  //     ctx.lineTo(x, y + width * (5 - Math.cos(Math.PI / 6)) + length)
  //     y = y + length + width * (5 - Math.cos(Math.PI / 6))
  //     ctx.moveTo(x - width / 2, y)
  //     ctx.lineTo(x, y + width * Math.cos(Math.PI / 6))
  //     ctx.lineTo(x + width / 2, y)
  //   } else {
  //     width = width + length
  //     length = width - length
  //     width = width - length
  //     length = length - width * 5
  //     if (style != null) {
  //       fillPel(style, x + width * 5 / 2, y - width / 2, length, width)
  //     }
  //     ctx.strokeRect(x + width * 5 / 2, y - width / 2, length, width)
  //     ctx.moveTo(x, y)
  //     ctx.lineTo(x + width * 5 / 2, y)
  //     ctx.moveTo(x + width * 5 / 2 + length, y)
  //     ctx.lineTo(x + width * (5 - Math.cos(Math.PI / 6)) + length, y)
  //     x = x + length + width * (5 - Math.cos(Math.PI / 6))
  //     ctx.moveTo(x, y - width / 2)
  //     ctx.lineTo(x + width * Math.cos(Math.PI / 6), y)
  //     ctx.lineTo(x, y + width / 2)
  //   }
  //   ctx.closePath()
  //   ctx.fillStyle = ctx.strokeStyle
  //   ctx.fill()
  //   ctx.stroke()
  // }

  // 避雷器
  // 起点坐标(x,y),宽度width,默认10;长度length,默认8倍width
  // function drawArrester(x, y, width, length, style) {
  //   width = width || 10
  //   length = length || width * 8
  //   ctx.beginPath()
  //   if (width <= length) {
  //     length = length - width * 5
  //     if (style != null) {
  //       fillPel(style, x - width / 2, y + width * 5 / 2, width, length)
  //     }
  //     ctx.strokeRect(x - width / 2, y + width * 5 / 2, width, length)
  //     ctx.moveTo(x, y)
  //     ctx.lineTo(x, y + width * 3)

  //     y += width * 3
  //     ctx.moveTo(x - width / 4, y)
  //     ctx.lineTo(x, y + length / 3)
  //     ctx.lineTo(x + width / 4, y)

  //     y += (length - width / 2)
  //   } else {
  //     width = width + length
  //     length = width - length
  //     width = width - length
  //     length = length - width * 5
  //     if (style != null) {
  //       fillPel(style, x + width * 5 / 2, y - width / 2, length, width)
  //     }
  //     ctx.strokeRect(x + width * 5 / 2, y - width / 2, length, width)
  //     ctx.moveTo(x, y)
  //     ctx.lineTo(x + width * 3, y)
  //     ctx.moveTo(x + width * 5 / 2 + length, y)
  //     ctx.lineTo(x + width * 5 + length, y)

  //     x += width * 3
  //     ctx.moveTo(x, y - width / 4)
  //     ctx.lineTo(x + length / 3, y)
  //     ctx.lineTo(x, y + width / 4)

  //     x += (length + width * 2)
  //   }
  //   ctx.closePath()
  //   ctx.fill()
  //   ctx.stroke()
  //   drawGroundLine(x, y, width * 2)
  // }

  // 中心接地变压器
  // 起点坐标(x,y),最大宽度width,默认50
  function drawTransformer(x, y, width, style) {
    width = width || 50
    var r = width / 5
    // 画两个圆
    ctx.beginPath()
    ctx.arc(x, y + r * 3, r, 0, 2 * Math.PI)
    ctx.moveTo(x + r, y + r * 9 / 2)
    ctx.arc(x, y + r * 9 / 2, r, 0, 2 * Math.PI)
    if (style != null) {
      ctx.fillStyle = style
      ctx.fill()
    }
    ctx.stroke()
    // 画正三角形
    y += r * 3
    ctx.beginPath()
    ctx.moveTo(x - r / 3, y)
    ctx.lineTo(x, y - r * 2 / 3 * Math.cos(Math.PI / 6))
    ctx.lineTo(x + r / 3, y)
    ctx.closePath()
    ctx.stroke()
    // 画线
    y -= r * 3
    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.lineTo(x, y + r * 2)
    ctx.moveTo(x, y + r * 11 / 2)
    ctx.lineTo(x, y + r * 8)
    // 画Y型图
    y += r * 9 / 2
    ctx.moveTo(x, y)
    ctx.lineTo(x, y + r / 2)
    ctx.moveTo(x, y)
    ctx.lineTo(x - r / 2 * Math.cos(Math.PI / 6), y - r / 2 * Math.sin(Math.PI / 6))
    ctx.moveTo(x, y)
    ctx.lineTo(x + r / 2 * Math.cos(Math.PI / 6), y - r / 2 * Math.sin(Math.PI / 6))
    ctx.moveTo(x, y)
    ctx.lineTo(x - r * 3, y)
    ctx.stroke()
    // 画接地线
    drawGroundLine(x - r * 3, y, r * 2)
  }

  // 电容器
  // 起点坐标(x,y),最大宽度width,默认40
  function drawCapacitance(x, y, width) {
    // r接圆半径,下三角形半径为r*2
    width = width || 40
    let r = width / 4
    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.lineTo(x, y + r)
    ctx.arc(x, y + r * 2, r, Math.PI * 3 / 2, 0, true)
    ctx.lineTo(x, y + r * 2)
    ctx.lineTo(x, y + r * 4)
    y += r * 4
    r *= 4
    var tmp_x
    var tmp_y
    // 斜线一半的长度tmp_l对应的(|x|,|y|)
    var tmp_l = r * (1 - Math.cos(Math.PI / 6))
    var tmp_lx = tmp_l * Math.cos(Math.PI / 6)
    var tmp_ly = tmp_l * Math.sin(Math.PI / 6)
    // 画三角形
    tmp_x = x - r * 3 / 8 * Math.sin(Math.PI / 6)
    tmp_y = y + r * 3 / 8 * Math.cos(Math.PI / 6)
    ctx.lineTo(tmp_x, tmp_y)
    ctx.moveTo(tmp_x - tmp_lx, tmp_y - tmp_ly)
    ctx.lineTo(tmp_x + tmp_lx, tmp_y + tmp_ly)
    tmp_x = x - r * 5 / 8 * Math.sin(Math.PI / 6)
    tmp_y = y + r * 5 / 8 * Math.cos(Math.PI / 6)
    ctx.moveTo(tmp_x - tmp_lx, tmp_y - tmp_ly)
    ctx.lineTo(tmp_x + tmp_lx, tmp_y + tmp_ly)
    ctx.moveTo(tmp_x, tmp_y)
    tmp_x = x - r * Math.sin(Math.PI / 6)
    tmp_y = y + r * Math.cos(Math.PI / 6)
    ctx.lineTo(tmp_x, tmp_y)
    tmp_x = x - r / 4 * Math.sin(Math.PI / 6)
    ctx.lineTo(tmp_x, tmp_y)
    ctx.moveTo(tmp_x, tmp_y - tmp_l)
    ctx.lineTo(tmp_x, tmp_y + tmp_l)
    tmp_x = x + r / 4 * Math.sin(Math.PI / 6)
    ctx.moveTo(tmp_x, tmp_y - tmp_l)
    ctx.lineTo(tmp_x, tmp_y + tmp_l)
    ctx.moveTo(tmp_x, tmp_y)
    tmp_x = x + r * Math.sin(Math.PI / 6)
    ctx.lineTo(tmp_x, tmp_y)
    tmp_x = x + r * 5 / 8 * Math.sin(Math.PI / 6)
    tmp_y = y + r * 5 / 8 * Math.cos(Math.PI / 6)
    ctx.lineTo(tmp_x, tmp_y)
    ctx.moveTo(tmp_x + tmp_lx, tmp_y - tmp_ly)
    ctx.lineTo(tmp_x - tmp_lx, tmp_y + tmp_ly)
    tmp_x = x + r * 3 / 8 * Math.sin(Math.PI / 6)
    tmp_y = y + r * 3 / 8 * Math.cos(Math.PI / 6)
    ctx.moveTo(tmp_x + tmp_lx, tmp_y - tmp_ly)
    ctx.lineTo(tmp_x - tmp_lx, tmp_y + tmp_ly)
    ctx.moveTo(tmp_x, tmp_y)
    ctx.lineTo(x, y)
    ctx.stroke()
  }

  // 互感器
  // 起点坐标(x,y),最大宽度width,默认40
  function drawInductor(x, y, width, style) {
    width = width || 40
    var r = width / 8
    ctx.beginPath()
    ctx.arc(x, y + r * 4, r, 0, 2 * Math.PI)
    ctx.moveTo(x - r * 2, y + r * 4)
    ctx.arc(x - r * 3, y + r * 4, r, 0, 2 * Math.PI)
    ctx.moveTo(x + r * 4, y + r * 3)
    ctx.arc(x + r * 3, y + r * 4, r, 0, 2 * Math.PI)
    if (style != null) {
      ctx.fillStyle = style
      ctx.fill()
    }
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.lineTo(x, y + r * 8)
    ctx.moveTo(x - r * 3, y + r)
    ctx.lineTo(x - r * 3, y + r * 7)
    ctx.moveTo(x + r * 3, y + r)
    ctx.lineTo(x + r * 3, y + r * 7)
    ctx.stroke()
  }

  // 接地线
  // 起点坐标(x,y),最大宽度width,默认20
  function drawGroundLine(x, y, width) {
    width = width || 20
    ctx.beginPath()
    ctx.moveTo(x, y)
    y = y + width * 3 / 4
    ctx.lineTo(x, y)
    ctx.moveTo(x - width / 2, y)
    ctx.lineTo(x + width / 2, y)
    ctx.moveTo(x - width / 4, y + width / 4)
    ctx.lineTo(x + width / 4, y + width / 4)
    ctx.moveTo(x - width / 8, y + width / 2)
    ctx.lineTo(x + width / 8, y + width / 2)
    ctx.stroke()
  }

  // 画网格线
  function drawGrid(x, y, width, height, space) {
    x = x || 0
    y = y || 0
    width = width || 800
    height = height || 600
    space = space || 10
    ctx.beginPath()
    for (var dx = x; dx < x + width; dx += space) {
      ctx.moveTo(dx, y)
      ctx.lineTo(dx, y + height)
    }
    for (var dy = y; dy < y + height; dy += space) {
      ctx.moveTo(x, dy)
      ctx.lineTo(x + width, dy)
    }
    ctx.stroke()
  }

  return {
    init: init, // 初始化画布
    draw: draw, // 画图draw();
    load: load, // 加载布局数据,load(layoutJson)
    update: update, // 更新数据,update(tagId,dataJson)
    updateStatus: updateStatus, // 仅更新状态,updateStatus(tagId,status)
    updateData: updateData, // 仅更新数据,updateData(tagId,dataJson)
    config: config, // 配置项
    layout: chartJson, // 经转换后的布局数据结构
    zoom: zoom// 缩放
  }
}
export {
  SysChart
}
